<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>招商启动会</title>
	<link rel="stylesheet" href="__JBH__/css/app.css">
	<link rel="stylesheet" href="__JBH__/lib/dragula-master/dist/dragula.min.css">
</head>
<body>
	<div class="banner">
		<div class="w960">
			<div class="category" style="display:none;" v-show="'category_list' != active">
				<a v-text="category_name_active"></a>
			</div>
			<div class="tag tag-1">
				<span>共计展位</span>
				<ul>
					<li track-by="$index" v-for="num1 in number.booth_number" v-text="num1"></li>
				</ul>
			</div>
			<div class="tag tag-2">
				<span>已预订展位</span>
				<ul>
					<li track-by="$index" v-for="num2 in number.shattered_number" v-text="num2"></li>
				</ul>
			</div>
			<div class="tag tag-3">
				<span>当前仅剩展位</span>
				<ul>
					<li track-by="$index" v-for="num3 in number.surplus_number" v-text="num3"></li>
				</ul>
			</div>		
		</div>
	</div>
	
	<!-- 分类列表 -->
	<div class="table-category" id="table-category" v-show="'category_list' == active">
		<ul class="table-category-head">
			<li><a>品类名</a><a>品牌数</a><a>展位数</a></li>
			<li><a>品类名</a><a>品牌数</a><a>展位数</a></li>
		</ul>

		<ul class="table-category-body" id="table-category-body">
			<li v-on:click="liveShopList(category.business_category_id, category.business_category_name)" class="row" v-for="category in category_list" track-by="$index">
				<a><span class="text" v-text="category.business_category_name"></span></a>
				<a v-text="category.shop_num"></a>
				<a v-text="category.shattered_number"></a>
			</li>
		</ul>
	</div>
	<!-- /分类列表 -->
	
	<!-- 店铺列表 -->
	<div class="table-shop" id="table-shop" v-show="'shop_list' == active" style="display:none;">
		<ul class="table-shop-head">
			<li><a>品牌名</a><a>展位数</a><a>是否全年合作</a></li>
			<li><a>品牌名</a><a>展位数</a><a>是否全年合作</a></li>
		</ul>

		<ul class="table-shop-body" id="table-shop-body">
			<li class="row" v-for="shop in shop_list" track-by="$index">
				<a><span class="text" v-text="shop.business_shop_name"></span></a>
				<a v-text="shop.business_shop_number"></a>
				<a v-text="shop.business_shop_year"></a>
			</li>
		</ul>
	</div>
	<!-- /店铺列表 -->


	<!-- 排名列表 -->
	<div class="table-rank table-rank-1" id="table-rank" v-show="'rank_list' == active" style="display:none;">
		<ul class="table-rank-head">
			<li><a>品牌名</a><a>展位数</a><a>是否全年合作</a></li>
			<li><a>品牌名</a><a>展位数</a><a>是否全年合作</a></li>
		</ul>

		<ul class="table-rank-body" id="table-rank-body">
			<li class="row" v-for="shop in shop_list" track-by="$index">
				<a v-bind:class="[show_rank_num || 'bg-' + shop.group]">
					<span class="num"></span>
					<span class="text" v-text="shop.business_shop_name"></span>
				</a>
				<a v-bind:class="[show_rank_num || 'bg-' + shop.group]" v-text="shop.business_shop_number"></a>
				<a v-bind:class="[show_rank_num || 'bg-' + shop.group]" v-text="shop.business_shop_year"></a>
			</li>
		</ul>
	</div>
	<!-- /排名列表 -->

	<div class="bar">
		<ul v-show="'category_list' != active">
			<li><a v-on:click="getCategoryList" title="返回品类">返回品类</a></li>
			<li><a v-show="'shop_list' == active || show_rank_num && 'rank_list' != active" v-on:click="getRankList" title="初步排名">初步排名</a></li>
			<li><a v-show="'shop_list' != active && !show_rank_num" v-on:click="showOrderNum" title="最终排名">最终排名</a></li>
		</ul>
	</div>
	<script type="text/javascript">
	var API = {
		'category_list': '{:U("Jbh/getCategorySort")}',
		'shop_list': '{:U("Jbh/getShopSort")}',
		'number': '{:U("Jbh/boothNumber")}'
 	}
	var INTERVAL = 2000;
	</script>
	<script type="text/javascript" src="__JBH__/lib/vue.js"></script>
	<script type="text/javascript" src="__JBH__/lib/jquery-1.11.3.js"></script>
	<script type="text/javascript" src="__JBH__/lib/dragula-master/dist/dragula.js"></script>
	<script type="text/javascript" src="__JBH__/js/app.js"></script>
</body>
</html>